<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <div style="display: flex;flex-wrap: wrap;justify-content: flex-start;">
            <a-form-item label="名称">
              <div class="s-box">
                <a-input allow-clear placeholder="请输入名称" v-model="queryParamInput.name" />
              </div>
            </a-form-item>
            <a-form-item label="药店">
              <a-select @popupScroll="handlePopupScroll" ref="select" v-model:value="queryParamInput.pharmacyid"
                style="width: 170px" class="s-box">
                <a-select-option :value="item.id" v-for='(item,index) in pharmacysOptions'
                  :key='index'>{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="状态">
              <a-select ref="select" v-model:value="queryParamInput.status" style="width: 120px" class="s-box">
                <a-select-option :value="0">全部</a-select-option>
                <a-select-option :value="1">上架</a-select-option>
                <a-select-option :value="2">下架</a-select-option>
              </a-select>
            </a-form-item>
            <a-button type="primary" class="s-box" @click="handleSearch">查询</a-button>
            <a-button class="s-box" @click="resetSearch">重置</a-button>
            <a-button class="s-box" type="primary" icon="plus" @click="addStore"> 添加中药</a-button>
          </div>
        </a-form>
      </div>

      <a-table :scroll="{ x: true }" ref="table" @change="tablePaginationChange" :pagination="pagination" bordered
        :dataSource="dataSource" :columns="columns" :rowKey="(record,index)=> index">

        <div slot="action" slot-scope="text, record" href="javascript:;">
          <a-button size='small' type="link" @click="updateInfo(record)">
            修改
          </a-button>
          <a-divider type="vertical" />
          <a-switch @change="setStatus(record.id,record.status)" checked-children="上架" un-checked-children="下架"
            v-model:checked="record.showstatus" />
          <!-- <a-popconfirm title="是否要删除此行？" @confirm="deletInfo(record)">
            <a-button size='small' type="link" style="color: #fc2b2f">
              删除
            </a-button>
          </a-popconfirm> -->
        </div>
      </a-table>
    </a-card>
    <addBox ref="addBox" :visible="addFlag" @cancel="addCancel" @ok="AddSuccess">
    </addBox>
    <imgBox ref='preimg'></imgBox>
  </page-header-wrapper>
</template>

<script>
  import {
    debounce
  } from 'lodash-es';
  import {
    STable,
    Ellipsis,
  } from '@/components'
  import {
    chineseMedicineList,
    chineseMedicineDelet,
    chinesedrugDel
  } from '@/api/medicine'

  import {
    pharmacysList
  } from '@/api/pharmacys'


  import addBox from './add'

  import {
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import {
    createVNode
  } from 'vue';
  import {
    Modal
  } from 'ant-design-vue';
  import imgBox from '@/components/previewImg/index'

  export default {
    components: {
      STable,
      Ellipsis,
      addBox,
      imgBox
    },

    data() {
      return {
        shenhe: 0, //审核
        status: 0, //状态
        addFlag: false,
        pagination: {
          current: 1, //默认当前叶数
          total: 0, // 数据总数 如果不设置就以绑定的数据量为准
          pageSize: 10, // 默认每页条数
          showSizeChanger: true, //是否可以改变 pageSize
          pageSizeOptions: ['10', '20', '40', '80', '100'], //可切换每叶数据条数
          showTotal: total => this.$t('共') + ' ' + `${total}` + ' ' + this.$t('条数据'), // 分页中显示总的数据
          hideOnSinglePage: false // 只有一页时是否隐藏分页器 true为不显示 false为显示
        },
        queryParam: {
          name: '',
          pharmacyid: 0,
          status: 0
        },
        queryParamInput: {
          name: '',
          pharmacyid: '',
          status: 0
        },
        searchflag: false,
        dataSource: [],
        columns: [{
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            width: 100,
          },
          {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            ellipsis: true,
          },
          {
            title: '拼音',
            dataIndex: 'pinyin',
            key: 'pinyin',
            ellipsis: true,
          },
          {
            title: '售价',
            dataIndex: 'price',
            key: 'price',
            ellipsis: true,
          },
          {
            title: '供货价',
            dataIndex: 'supplyprice',
            key: 'supplyprice',
            ellipsis: true,
          },
          {
            title: '医生指数',
            dataIndex: 'jhprice',
            key: 'jhprice',
            ellipsis: true,
          },
          {
            title: '所属药店',
            dataIndex: 'pharmacy',
            key: 'pharmacy',
            ellipsis: true,
          },
          // {
          //   title: '医生指数设置',
          //   dataIndex: 'jhprice',
          //   key: 'jhprice',
          //   ellipsis: true,
          // },

          {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 190,
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],
        pharmacysOptions: [], //药房列表
        totalCount: 0,
        pPageNo: 1
      }
    },
    created() {
      this.getList()
      this.getPharmacysList()
    },

    setup() {
      const handlePopupScroll = debounce(value => {
        console.log('fetching user', value);

      }, 300);
    },

    methods: {
      setStatus(id, status) {
        chinesedrugDel({
          id: parseInt(id),
          status: status == 1 ? 2 : 1
        }).then(res => {
          this.getList()
        })
      },
      handlePopupScroll(e) {
        const {
          target
        } = e
        const scrollHeight = target.scrollHeight - target.scrollTop
        const clientHeight = target.clientHeight
        // 下拉框不下拉的时候
        if (scrollHeight === 0 && clientHeight === 0) {
          this.scrollPage = 1
        } else {
          // 当下拉框滚动条到达底部的时候
          if (scrollHeight < clientHeight + 5) {
            this.scrollPage = this.scrollPage + 1
            const scrollPage = this.scrollPage // 获取当前页
            const totalCount = this.totalCount * (scrollPage || 1) // 新增数据量
            const newData = [] // 存储新增数据
            let max = "" // max 为能展示的数据的最大条数
            if (this.pharmacysOptions.length > totalCount) {
              // 如果总数据的条数大于需要展示的数据
              max = totalCount
            } else {
              // 否则
              max = this.pharmacysOptions.length
            }
            if (this.pharmacysOptions.length < this.totalCount) {
              this.pPageNo++
              this.getPharmacysList()
            }
          }
        }
      },

      getPharmacysList() {
        pharmacysList({
          pageNo: this.pPageNo,
          pageSize: 20
        }).then(res => {
          let test = []
          this.pharmacysOptions = [...this.pharmacysOptions, ...res.data.data]
          this.totalCount = res.data.totalCount
        })
      },


      handleSearch() {
        this.pagination.current = 1
        this.searchflag = true
        this.queryParam = this.queryParamInput
        this.getList()
      },
      resetSearch() {
        this.pagination.current = 1
        this.searchflag = false
        this.queryParam = {
          name: '',
          pharmacyid: 0,
          status: 0
        }
        this.queryParamInput = this.queryParam
        this.getList()
      },
      previewImg(img) {
        this.$refs.preimg.initData(img)
      },
      getList() {
        let data = {
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize,
          ...this.queryParam
        }
        chineseMedicineList(data).then(res => {
          res.data.data.forEach(resp => {
            resp.showstatus = resp.status == 1 ? true : false
          })
          this.pagination.total = res.data.totalCount
          this.dataSource = res.data.data
        })
      },


      updateInfo(val) {
        this.addFlag = true
        this.$nextTick(() => {
          this.$refs.addBox.setUpdate(val)
        })
      },

      addCancel() {
        this.addFlag = false
      },
      AddSuccess() {
        this.addFlag = false
        this.getList()
      },
      addStore() {
        this.addFlag = true
        this.$nextTick(() => {
          this.$refs.addBox.updateflag = false
        })
      },
      tablePaginationChange(e) {
        this.pagination = e
        this.getList()
      },
      getDate(stamp) {
        var date = new Date(stamp * 1000)
        return date.getFullYear() + '-' + (date.getMonth() + 1 < 10 ? ('0' + (date.getMonth() + 1)) : date.getMonth() +
          1) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
      },
      deletInfo(val) {
        chineseMedicineDelet({
          id: val.id
        }).then(res => {
          this.getList()
        })
      }
    }
  }
</script>
<style scoped>
  .banner-img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    cursor: pointer;
  }

  .s-box {
    margin: 0 20px 20px 0;
  }
</style>